.bookslist {
  display: flex;
  justify-content: space-between;
  height: 895px;
  position: relative;
  &-tag {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    padding: 16px;
    width: 24%;
    p {
      margin-bottom: 16px;
      font-weight: 600;
    }
    > div {
      font-size: 14px;
      margin-bottom: 24px;
      border-bottom: 1px solid #ddd;
      padding-bottom: 16px;
      > div {
        font-size: 12px;
        display: flex;
        flex-wrap: wrap;
        span {
          color: #666;
          cursor: pointer;
          margin: 4px;
          padding: 4px;
          //   background-color: red;
        }
        span:hover {
          color: red;
        }
      }
    }
  }
  &-list {
    width: 72%;
    &-nav {
      background-color: rgba(240, 240, 240, 0.7);
      padding: 0 8px;
      color: #666;
      font-size: 14px;
      height: 48px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-sort {
        border-right: 1px solid #ccc;
        span {
          cursor: pointer;
          margin: 0 16px;
        }
      }
      &-show {
        display: flex;
        justify-content: end;
        & > :nth-child(2) {
          margin: 0 8px;
          padding: 0 8px;
          border-left: 1px solid #ccc;
          border-right: 1px solid #ccc;
        }
      }
    }
  }
}
.bookslist-list-notbooks {
  height: 400px;
  text-align: center;
  padding-top: 200px;
}
.bookslist-list-content {
  width: 100%;
  height: 860px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: wrap;
  position: relative;
  > dl {
    position: relative;
    display: flex;
    margin-bottom: 32px;
    width: 416px;
    height: 168px;
    padding: 8px;
    > dt {
      img {
        height: 100%;
        width: 120px;
      }
    }
    > dd {
      display: flex;
      justify-content: space-evenly;
      flex-direction: column;
      margin-left: 20px;
      p:nth-of-type(1) {
        font-size: 16px;
        font-weight: 800;
        color: #000;
      }
      p:nth-of-type(2) {
        font-size: 12px;
        color: #999;
        span {
          padding: 0 4px;
          border-right: 1px solid #ccc;
        }
      }
      p:nth-of-type(3) {
        font-size: 13px;
        line-height: 16px;
      }
      p:nth-of-type(4) {
        font-size: 12px;
        color: #f44336;
      }
      p:nth-of-type(5) {
        font-size: 12px;
        color: #0097a7;
      }
      p:nth-of-type(6) {
        font-size: 12px;
        color: #999;
      }
      i {
        margin-right: 8px;
      }
    }
  }
  .pagination {
    position: absolute;
    bottom: 24px;
    right: 24px;
  }
}

.search {
  position: absolute;
  top: 4px;
  left: 16px;
}

.bookslist-list .bookslist-list-nav .bookslist-list-nav-sort > .sortactive {
  color: red;
}
.bookslist-list
  .bookslist-list-nav
  .bookslist-list-nav-sort
  > span
  > .iconactive {
  display: none;
}
.collectBtn {
  font-size: 8px;
  position: absolute;
  right: 72px;
  bottom: 16px;
  border-radius: 50%;
}
.collectSuccess {
  color: red;
  border-color: red;
}
.status-span {
  font-weight: normal;
  font-size: 12px;
  color: #aaa;
}
